<template>
    <scroll-view class="remmends_container" @scrolltolower="handerTolower" scroll-y v-if="recommends.length>0">
        <!-- 推荐开始 -->
        <view class="recommend_wrap">
            <navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`">
                <image mode="widthFix" :src="item.thumb"></image>
            </navigator>
        </view>
        <!-- 推荐结束 -->

        <!-- 月份开始 -->
        <view class="months_wrap">
            <view class="months_title">
                <view class="months_title_info">
                    <view class="months_info">
                        <text>{{months.DD}} /</text>
                        {{months.MM}} 月
                    </view>
                    <veiw class="months_text">{{months.title}}</veiw>
                </view>
                <view class="months_title_more">更多></view>
            </view>
            <view class="months_content">
                <view class="months_item" v-for="(item,index) in months.items" :key="item.id">
                    <go-detail :list="months.items" :index="index">
                    <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
                    </go-detail>
                </view>
            </view>
        </view>
        <!-- 月份结束 -->

        <!-- 热门开始 -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text>热门</text>
            </view>
            <view class="hots_content">
                <view class="hots_item" v-for="(item,index) in hots" :key="item.id">
                    <go-detail :list="hots" :index="index">
                    <image mode="widthFix" :src="item.thumb"></image>
                    </go-detail>
                </view>
            </view>
        </view>
        <!-- 热门结束 -->
    </scroll-view>
</template>

<script>
import moment from 'moment'
import goDetail from '@/components/goDetail'
    export default {
        data() {
            return {
                recommends:[],
                months:{},
                hots:[],
                params:{
                    limit:30,
                    order:'hot',
                    skip:0
                },
                hasMore:true
            }
        },
        mounted(){
            uni.setNavigationBarTitle({title:'推荐'})
            this.getList()
        },
        components:{
            goDetail
        },
        methods:{
            getList(){
                this.request({
                url:'http://157.122.54.189:9088/image/v3/homepage/vertical',
                data:this.params
            }).then(result=>{
                console.log(result)
                if(result.res.vertical.length===0){
                    this.hasMore=false
                    uni.showToast({
                            title:'没有更多数据了',
                            icon:'none'
                        })
                        return;
                }
                 if(this.recommends.length===0){
                 this.recommends = result.res.homepage[1].items
                 this.months=result.res.homepage[2]
                 this.months.MM = moment(this.months.stime).format('MM');
                 this.months.DD = moment(this.months.stime).format('DD');
                 }
                 this.hots=[...this.hots,...result.res.vertical]
            })
            },
            handerTolower(){
                if(this.hasMore){
                   this.params.skip += this.params.limit;
                   this.getList();
                }else{
                 // 弹窗提示用户
                   uni.showToast({
                     title:'没有数据了',
                     icon: 'none'
                   })
               }
             }
        }
    }
</script>

<style lang="scss" scoped>
  .recommend_wrap{
      display: flex;
      flex-wrap: wrap;
      .recommend_item{
          width: 50%;
          border: 5px solid #fff;
      }
  }
  .months_title{
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      .months_title_info{
         color: $color;
         font-size: 30rpx;
         font-weight: 600;
         display: flex;
         .months_info{
           text{
               font-size: 36rpx;
           }
         }
         .months_text{
             font-size: 34rpx;
             color: #666;
             margin-left: 30rpx;
         }
      }
      .omnths_title_more{
          font-size: 24rpx;
          color: $color;
      }
  }
  .months_content{
      display: flex;
      flex-wrap: wrap;
      .months_item{
          width: 50%;
          border: 5px solid #fff;
      }
  }
  .hots_wrap{
      .hots_title{
          padding: 20rpx;
          text{
              border-left: 20rpx solid $color;
              padding-left: 20rpx;
              font-size: 34rpx;
              font-weight: 600;
          }
      }
      .hots_content{
          display: flex;
          flex-wrap: wrap;
          .hots_item{
              width: 33.33%;
              border: 5rpx solid #fff;
              image{

              }
          }
      }
  }
</style>